<template>
  <div class="tw-card clear-float" :style="{'height':heightCard?heightCard:'auto','margin-bottom':mb,'width':widthCard}">
    <div class="tw-card__label">
      <span class="tw-card__label__left-corner" ></span>
      <span class="tw-card__label__right-corner" ></span>
      <div class="tw-card__label__layout" v-if="label"  :style="{'border-bottom':isBorder?'none':''}">
        <h4 v-if="label" :style="{'border-bottom':isBorder?'none':''}" style="height:100%">{{label}}</h4>
        <span class="sub-label" v-if="subLabel">{{subLabel}}</span>
        <a class="tw-card__label__link" @click="go()" v-if="link">
          <img src="@/assets/images/card-more.png" alt="">
        </a>
        <div class="tw-card__label__rightLabel" v-if="rightLabel" :class="{'gray-label': grayRightLabel}">{{rightLabel}}</div>
        <ul v-if="tabs" class="tw-card__tabs" :class="{'tw-card__tabs--right': tabRight}">
          <li
            @mouseenter="handleMouseEnter(tab.id, tab.name)"
            :class="{active: activeTab === tab.id}"
            v-for="tab in tabs"
            v-bind:key="tab.id">
            <a>{{tab.value}}</a>
          </li>
        </ul>
      </div>
    </div>
    <div :class="{'tw-card__content':true,'flex-box':flexFlag}" style="position:relative;">
      <slot></slot>
    </div>
  </div>
</template>

<script scoped>
export default{
  props: ['label', 'tabs', 'activeTab', 'tabRight', 'rightLabel', 'grayRightLabel', 'subLabel', 'link', 'flexFlag', 'isBorder', 'heightCard','mb','widthCard'],
  methods: {
    handleMouseEnter: function (id, name) {
      this.$emit('changeTab', id, name)
    },
    go: function () {
      if (this.link) {
        this.$router.push({ path: this.link })
      }
    }
  }
}
</script>

<style lang="scss">
.tw-card{
  border: solid 2px #1a1aa4;
  background: rgba(36,0,255,0.15);
}
.tw-card__label__link {
    float: right;
    height: 50px;
    text-align: center;
    color: #298eff;
    line-height: 52px;
}
.tw-card__label__layout {
    height: 56px;
    margin: 0 20px;
    border-bottom: 2px solid #1a1aa4;
    h4{
      border-bottom: 4px solid #2d8eff;
      font-size: 24px;
    }
}
.tw-card__label{
  margin-bottom: 10px;
}
.flex-box{
  display: flex;
}
</style>
